<div class="col-md-12 bg-light-grey padding">
    <list-search
            class="pull-right"
            data-filters="filters"
            data-options="itemsPerPageOptions"
            data-items="itemsPerPage"
    ></list-search>
</div>

<div class="clearfix"></div>
<konga-loader ng-if="loading"></konga-loader>

<div class="row" ng-show="!loading || items.data.length">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <tr dir-paginate="item in items.data | orderBy:sort.column:sort.direction | filter : filters.searchWord | itemsPerPage: itemsPerPage as filteredItems">

                    <td width="1">
                        <h5 class="no-margin-bottom">{{item.name}}</h5>
                        <p class="help-block">{{item.host}}</p>
                        <div class="btn-group" uib-dropdown is-open="status.isopen" dropdown-append-to-body="true">
                            <button type="button" class="btn btn-primary btn-sm btn-block btn-flat" uib-dropdown-toggle>
                                MORE... <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu animated fadeInUpShort go" uib-dropdown-menu role="menu"
                                aria-labelledby="single-button">
                                <li role="menuitem"><a href>
                                    <raw-view data-item="item" data-text="'Raw View'"></raw-view>
                                </a></li>
                                <li role="menuitem">
                                    <a ui-sref="services.read({ service_id: item.id })">
                                        <i class="mdi mdi-pencil"></i>&nbsp;&nbsp;
                                        Edit Service
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <td width="1" class="no-wrap text-small">
                        Plugins &nbsp;<i class="mdi mdi-arrow-right"></i>
                    </td>
                    <td>
                        <div class="badge badge-api-plugin"
                             ng-class="{'badge-success badge-inverse' : item.enabled}"
                             ng-repeat="item in getGeneralPlugins(item)">
                            <i class="mdi mdi-cloud-outline" uib-tooltip="Service plugin"></i>
                            <span class="text">{{item.name.toUpperCase().split("-").join(" ")}}</span>

                        </div>
                        <div class="badge badge-api-plugin"
                             ng-class="{'badge-success badge-inverse' : _item.enabled}"
                             ng-repeat="_item in getConsumerPlugins(item)">
                            <i class="mdi mdi-account-box-outline text-danger"
                               uib-tooltip="Consumer specific plugin"></i>
                            <span class="text">{{_item.name.toUpperCase().split("-").join(" ")}}</span>

                            <div class="btn-group" uib-dropdown is-open="_item.isopen" dropdown-append-to-body="true">
                                <i class="mdi mdi-dots-vertical clickable" uib-dropdown-toggle></i>
                                <ul class="dropdown-menu animated fadeInUpShort go" uib-dropdown-menu role="menu"
                                    aria-labelledby="single-button">
                                    <li role="menuitem">
                                        <a href>
                                            <raw-view data-item="_item" data-text="'Raw view'"></raw-view>
                                        </a>
                                    </li>
                                    <li role="menuitem">
                                        <a href ng-click="onEditPlugin(_item)">
                                            <i class="mdi mdi-18px mdi-pencil clickable"></i>&nbsp;&nbsp;
                                            Edit
                                        </a>
                                    </li>

                                    <li role="menuitem">
                                        <a href ng-click="deletePlugin(item,_item)">
                                            <i class="mdi mdi-18px mdi-delete clickable"></i>&nbsp;
                                            Delete
                                        </a>
                                    </li>
                                </ul>
                            </div>


                        </div>
                        <button class="btn btn-sm btn-link"
                                uib-tooltip="Add a service plugin that only targets this consumer"
                                ng-click="onAddPlugin(item)">
                            <i class="mdi mdi-18px mdi-plus"
                            >ADD PLUGIN</i>
                        </button>
                    </td>
                    <td width="1" class="no-wrap text-small">
                        Routes &nbsp;<i class="mdi mdi-arrow-right"></i>
                    </td>
                    <td width="600" class="no-margin no-padding">
                        <table class="table table-condensed no-margin" ng-if="item.routes && item.routes.length">
                            <tr ng-repeat="route in item.routes">
                                <td>
                                    <h6>
                                        <strong>{{route.name || route.id}}</strong>
                                    </h6>
                                    <p ng-if="route.hosts" class="text-small help-block no-margin">
                                        {{route.hosts.join(", ")}}
                                    </p>
                                    <p ng-if="route.paths" class="text-small no-margin">
                                        {{route.paths.join(", ")}}
                                    </p>
                                    <p ng-if="route.methods" class="text-small text-danger no-margin">
                                        {{route.methods.join(", ")}}
                                    </p>
                                </td>
                                <td width="1" class="no-wrap text-small">
                                    Plugins &nbsp;<i class="mdi mdi-arrow-right"></i>
                                </td>
                                <td>
                                    <div class="badge badge-api-plugin"
                                         ng-class="{'badge-success badge-inverse' : item.enabled}"
                                         ng-repeat="item in getGeneralPlugins(route)">
                                        <i class="mdi mdi-cloud-outline" uib-tooltip="Service plugin"></i>
                                        <span class="text">{{item.name.toUpperCase().split("-").join(" ")}}</span>

                                    </div>
                                    <div class="badge badge-api-plugin"
                                         ng-class="{'badge-success badge-inverse' : _item.enabled}"
                                         ng-repeat="_item in getConsumerPlugins(route)">
                                        <i class="mdi mdi-account-box-outline text-danger"
                                           uib-tooltip="Consumer specific plugin"></i>
                                        <span class="text">{{_item.name.toUpperCase().split("-").join(" ")}}</span>

                                        <div class="btn-group" uib-dropdown is-open="_item.isopen" dropdown-append-to-body="true">
                                            <i class="mdi mdi-dots-vertical clickable" uib-dropdown-toggle></i>
                                            <ul class="dropdown-menu animated fadeInUpShort go" uib-dropdown-menu role="menu"
                                                aria-labelledby="single-button">
                                                <li role="menuitem">
                                                    <a href>
                                                        <raw-view data-item="_item" data-text="'Raw view'"></raw-view>
                                                    </a>
                                                </li>
                                                <li role="menuitem">
                                                    <a href ng-click="onEditPlugin(_item)">
                                                        <i class="mdi mdi-18px mdi-pencil clickable"></i>&nbsp;&nbsp;
                                                        Edit
                                                    </a>
                                                </li>

                                                <li role="menuitem">
                                                    <a href ng-click="deletePlugin(route,_item)">
                                                        <i class="mdi mdi-18px mdi-delete clickable"></i>&nbsp;
                                                        Delete
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>


                                    </div>
                                    <button class="btn btn-sm btn-link"
                                            uib-tooltip="Add a route plugin that only targets this consumer"
                                            ng-click="onAddPlugin(route, 'route')">
                                        <i class="mdi mdi-18px mdi-plus"
                                        >ADD PLUGIN</i>
                                    </button>
                                </td>
                                <td width="1">
                                    <div class="btn-group" uib-dropdown is-open="route.isopen" dropdown-append-to-body="true">
                                        <button type="button" class="btn btn-primary btn-sm btn-block btn-flat" uib-dropdown-toggle>
                                            MORE... <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu animated fadeInUpShort go" uib-dropdown-menu role="menu"
                                            aria-labelledby="single-button">
                                            <li role="menuitem"><a href>
                                                <raw-view data-item="route" data-text="'Raw View'"></raw-view>
                                            </a></li>
                                            <li role="menuitem">
                                                <a ui-sref="routes.read({ route_id: route.id })">
                                                    <i class="mdi mdi-pencil"></i>&nbsp;&nbsp;
                                                    Edit Route
                                                </a>
                                            </li>

                                            <!--<li role="menuitem"><a href="#">Something else here</a></li>-->
                                            <!--<li class="divider"></li>-->
                                            <!--<li role="menuitem"><a href="#">Separated link</a></li>-->
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <p class="help-block no-margin">
                            <span ng-if="!loadingRoutes && !item.routes.length">The service has no routes or they're not accessible by this consumer</span>
                            <span ng-if="loadingRoutes">
                                <i class="mdi mdi-loading mdi-spin text-primary"></i>&nbsp;
                                Loading routes...
                            </span>
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <dir-pagination-controls class="pull-right"></dir-pagination-controls>
    </div>
</div>